<script setup>

import {onMounted, reactive} from "vue";
import request from "@/utils/request.js";


// collapese折叠面板 指定默认打开
const activeNames = ref(['1'])
const handleChange = (val) => {
  // console.log(val)
}

let form1 = ref({})
let form2 = ref({})
let form3 = ref({})
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
const dialogVisible3 = ref(false)

const formLabelWidth = "130px";
const rules = reactive({
  tonnage: [{required: true, trigger: 'blur', message: "请输入吨位或总机功率"}],
  navigation_zone: [{required: false, trigger: 'blur', message: "请输入航区"}],
  stipulate: [{required: true, trigger: 'blur', message: "请输入一般规定"}],
});

// 甲板部
const tableData1 = ref([])
const tableData2 = ref([])
const tableData3 = ref([])
const tableData4 = ref([])
const tableData5 = ref([])
// const tableData1 = [
//   {
//     tonnage: '3000吨及以上',
//     stipulate: '船长、大副、二副、三副各 1 人，值班水手或者高级值班水手3人（国际航行船舶配备高级值班水手 2 人，值班水手 1 人）。'
//   },
//   {
//     tonnage: '500吨及以上至未满3000总吨',
//     stipulate: '船长、大副、三副各 1 人，值班水手或者高级值班水手3人（国际航行船舶配备高级值班水手 2 人，值班水手 1 人）。'
//   },
//   {
//     tonnage: '200吨及以上至未满500总吨',
//     stipulate: '船长、三副各1人，值班水手2人'
//   },
//   {
//     tonnage: '100吨及以上至未满200总吨',
//     stipulate: '船长、三副各1人，值班水手1人'
//   },
//   {
//     tonnage: '未满100总吨',
//     stipulate: '驾驶员1人，值班水手1人'
//   },
// ]
// const tableData2 = [
//   // 客船
//   {
//     tonnage: '500吨及以上',
//     stipulate: '（1）船长、大副、二副各 1 人，值班水手或者高级值班水手3人（国际航行船舶配备高级值班水手 2 人，值班水手 1 人）。（2）配有与救生艇数量相等的持有精通救生艇筏及救助艇操纵证书的人员（不包括船长和大副）'
//   },
//   {
//     tonnage: '200吨及以上至未满500总吨',
//     stipulate: '船长、二副各1人，值班水手2人'
//   },
//   {
//     tonnage: '100吨及以上至未满200总吨',
//     stipulate: '船长、二副各1人，值班水手1人'
//   },
//   {
//     tonnage: '未满100总吨',
//     stipulate: '船长1人，值班水手1人'
//   },
// ]
// const tableData3 = [
//   // 拖船
//   {
//     navigation_zone: '海上',
//     tonnage: '3000千瓦及以上',
//     stipulate: '船长、大副、二副、三副各一人，值班水手3人'
//   },
//   {
//     navigation_zone: '海上',
//     tonnage: '3000千瓦及以下',
//     stipulate: '船长、三副各一人，值班水手2人'
//   },
//   {
//     navigation_zone: '港内',
//     tonnage: '750千瓦及以上',
//     stipulate: '二副1人，值班水手2人'
//   },
//   {
//     navigation_zone: '港内',
//     tonnage: '未满750千瓦',
//     stipulate: '三副1人，值班水手1人'
//   }
// ]
// 轮机部
// const tableData4 = [
//   // 所有船舶
//   {
//     navigation_zone: '海上',
//     tonnage: '3000千瓦及以上',
//     stipulate: '轮机长、大管轮、二管轮、三管轮各1人，值班机工或者高级值班机工3人（国际航行船舶配备高级值班机工1人，值班机工2人）'
//   },
//   {
//     navigation_zone: '海上',
//     tonnage: '750千瓦以上至未满3000千瓦',
//     stipulate: '轮机长、大管轮各1人、值班机工或者高级值班机工2人（国际航行船舶配备高级值班机工1人，值班机工1人）'
//   },
//   {
//     navigation_zone: '海上',
//     tonnage: '220 千瓦及以上至未满750千瓦',
//     stipulate: '轮机长、三管轮各1人，值班机工2人'
//   },
//   {
//     navigation_zone: '海上',
//     tonnage: '75 千瓦及以上至未满220千瓦',
//     stipulate: '轮机员1人，值班机工（自动化机舱，BRC半自动化机舱及机架合一可见减免）1人'
//   },
//   {
//     navigation_zone: '海上',
//     tonnage: '未满75千瓦',
//     stipulate: '值班机工（机架合一的免）1人'
//   },
//   {
//     navigation_zone: '港内',
//     tonnage: '',
//     stipulate: '二管轮、三管轮（或轮机员）各1人，值班机工1人（机架合一的免）'
//   },
// ]
// 客运部
// const tableData5 = [
//   {
//     stipulate: '按船舶载客定额，每 50 名乘客配客运部人员 1 名；航程不超过 40 海里或航行时间不超过 4 小时的,可按每 100 名乘客配客运部人员 1 名；航程不超过 10 海里或航行时间不超过 1 小时的，可按每 150 名乘客配客运部人员 1 名；航程不超过 5 海里或航行时间不超过 0.5 小时的，可按每 200 名乘客配客运部人员 1名；航程不超过 5 海里或航行时间不超过 0.5 小时，且载客定额不足 50 名的，可不配客运部人员。'
//   }
// ]

onMounted(async () => {
  tableData1.value = await request("/deck/query_standard_by_ship_type?ship_type=" + "一般轮船")
  tableData2.value = await request("/deck/query_standard_by_ship_type?ship_type=" + "客船")
  tableData3.value = await request("/deck/query_standard_by_ship_type?ship_type=" + "拖船")
  tableData4.value = await request("/engineer/stipulate")
  tableData5.value = await request("/passenger/stipulate")
})


const handleEdit1 = (row) => {
  form1 = JSON.parse(JSON.stringify(row));
  dialogVisible1.value = true
}

const handleEdit2 = (row) => {
  form2 = JSON.parse(JSON.stringify(row));
  dialogVisible2.value = true
}
const handleEdit3 = (row) => {
  form3 = JSON.parse(JSON.stringify(row));
  dialogVisible3.value = true
}

const editAndSave1 = (form, url) => {
  const form_params = JSON.parse(JSON.stringify(form));
  request.post(url, form_params).then(res => {
    console.log(res);
    if (res.data) {
      ElMessage.success({
        message: '保存成功',
        type: 'success',
      })
      dialogVisible1.value = false;
    } else {
      ElMessage({
        showClose: true,
        message: '保存失败',
        type: 'error',
      })
    }
  });
  dialogVisible1.value = false
}

const editAndSave2 = (form, url) => {
  const form_params = JSON.parse(JSON.stringify(form));
  request.post(url, form_params).then(res => {
    console.log(res);
    if (res.data) {
      ElMessage.success({
        message: '保存成功',
        type: 'success',
      })
      dialogVisible2.value = false;
    } else {
      ElMessage({
        showClose: true,
        message: '保存失败',
        type: 'error',
      })
    }
  });
  dialogVisible2.value = false
}

const editAndSave3 = (form, url) => {
  const form_params = JSON.parse(JSON.stringify(form));
  request.post(url, form_params).then(res => {
    console.log(res);
    if (res.data) {
      ElMessage.success({
        message: '保存成功',
        type: 'success',
      })
      dialogVisible3.value = false;
    } else {
      ElMessage({
        showClose: true,
        message: '保存失败',
        type: 'error',
      })
    }
  });
  dialogVisible3.value = false
}
</script>

<template>
  <div class="app-wrapper">

    <el-card>
      <div style="font-size: 27px; margin: 20px;text-align: center;">甲板部、轮机部和客运部最低安全配员标准</div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="一般轮船-甲板部" name="1">
          <template #title>
            <h3><i>一般轮船（甲板部）</i></h3>
            <!-- <el-icon :size="30">
              <i-ep-Share />
            </el-icon> -->
          </template>
          <div>
            <el-table :data="tableData1" border style="width: 100%">
              <el-table-column prop="tonnage" label="吨位或总功率"/>
              <el-table-column prop="stipulate" label="一般规定"/>
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button type="success" @click="handleEdit1(scope.row)">编辑
                    <el-icon>
                      <i-ep-EditPen/>
                    </el-icon>
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>

        <el-collapse-item title="客船-甲板部" name="2">
          <template #title>
            <h3><i>客船（甲板部）</i></h3>

          </template>
          <div>
            <el-table :data="tableData2" border style="width: 100%">
              <el-table-column prop="tonnage" label="吨位或总功率"/>
              <el-table-column prop="stipulate" label="一般规定"/>
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button type="success" @click="handleEdit1(scope.row)">编辑
                    <el-icon>
                      <i-ep-EditPen/>
                    </el-icon>
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>

        <el-collapse-item title="拖船-甲板部" name="3">
          <template #title>
            <h3><i>拖船（甲板部）</i></h3>
          </template>
          <div>
            <el-table :data="tableData3" border style="width: 100%">
              <el-table-column prop="navigation_zone" label="航区"/>
              <el-table-column prop="tonnage" label="吨位或总功率"/>
              <el-table-column prop="stipulate" label="一般规定"/>
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button type="success" @click="handleEdit1(scope.row)">编辑
                    <el-icon>
                      <i-ep-EditPen/>
                    </el-icon>
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>

        <el-collapse-item title="所有船舶-轮机部" name="4">
          <template #title>
            <h3><i>所有船舶（轮机部）</i></h3>
          </template>
          <div>
            <el-table :data="tableData4" border style="width: 100%">
              <el-table-column prop="navigation_zone" label="航区"/>
              <el-table-column prop="total_power" label="吨位或总功率"/>
              <el-table-column prop="stipulate" label="一般规定"/>
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button type="success" @click="handleEdit2(scope.row)">编辑
                    <el-icon>
                      <i-ep-EditPen/>
                    </el-icon>
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>

        <el-collapse-item title="客船-客运部" name="5">
          <template #title>
            <h3><i>客船（客运部）</i></h3>
          </template>
          <div>
            <el-table :data="tableData5" border style="width: 100%">
              <el-table-column prop="stipulate" label="一般规定"/>
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button type="success" @click="handleEdit3(scope.row)">编辑
                    <el-icon>
                      <i-ep-EditPen/>
                    </el-icon>
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>

      </el-collapse>

    </el-card>


    <el-dialog
        v-model="dialogVisible1"
        title="编辑"
        width="500"
        :before-close="handleClose"
    >
      <el-form :model="form1" :rules="rules" ref="ruleFormRef2">
        <!--            <el-form-item label="ID" prop="id" :label-width="formLabelWidth">-->
        <!--              <el-input v-model="form1.id" autocomplete="off"/>-->
        <!--            </el-form-item>-->
        <el-form-item label="吨位或总机功率" prop="tonnage" :label-width="formLabelWidth">
          <el-input v-model="form1.tonnage"></el-input>
        </el-form-item>
        <el-form-item label="航区" prop="navigation_zone" :label-width="formLabelWidth">
          <el-input v-model="form1.navigation_zone"></el-input>
        </el-form-item>
        <el-form-item label="一般规定" prop="stipulate" :label-width="formLabelWidth">
          <el-input v-model="form1.stipulate" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="editAndSave1( form1,  '/deck/stipulate/update')">
            确定修改
          </el-button>
        </div>
      </template>
    </el-dialog>


    <el-dialog
        v-model="dialogVisible2"
        title="编辑"
        width="500"
        :before-close="handleClose"
    >
      <el-form :model="form2" :rules="rules" ref="ruleFormRef2">
        <el-form-item label="吨位或总机功率" prop="tonnage" :label-width="formLabelWidth">
          <el-input v-model="form2.total_power"></el-input>
        </el-form-item>
        <el-form-item label="航区" prop="navigation_zone" :label-width="formLabelWidth">
          <el-input v-model="form2.navigation_zone"></el-input>
        </el-form-item>
        <el-form-item label="一般规定" prop="stipulate" :label-width="formLabelWidth">
          <el-input v-model="form2.stipulate " type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="editAndSave2( form2,  '/engineer/stipulate/update')">
            确定修改
          </el-button>
        </div>
      </template>
    </el-dialog>


    <el-dialog
        v-model="dialogVisible3"
        title="编辑"
        width="500"
        :before-close="handleClose"
    >
      <el-form :model="form3" :rules="rules" ref="ruleFormRef2">
        <el-form-item label="一般规定" prop="stipulate" :label-width="formLabelWidth">
          <el-input v-model="form3.stipulate" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible3 = false" >取消</el-button>
          <el-button type="primary" @click="editAndSave3( form3,  '/passenger/stipulate/update')">
            确定修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>


</template>

<style lang="scss" scoped>
.app-wrapper {
  margin: 2% 30px;
}
</style>